/*
 * Copyright (c) 2011-2021 VMware Inc. or its affiliates, All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 70em) { @content ; }
  }
  @else if $point == small {
    @media (max-width: 40em)  { @content ; }
  }
  @else if $point == xsmall {
    @media (max-width: 30em)  { @content ; }
  }
}

.mobile-only {
  display: none;
}

@mixin mobile-lg {
  .mobile-only {
    display: block;
  }


}

@mixin mobile-sm {
  .mobile-only {
    display: block;
  }

  
}


@media (max-width: 800px) {

  section#welcome {
    height: 180px;
    background: url(../img/homepage-bg.png) center -100px no-repeat rgb(147, 173, 160);
    article {
      span.logo-reactor {
        display: none;
      }
      h1 {
        margin-top: 50px;
        font-size: 26px;
      }
      p {
        display: block;
        background: rgba(52,48,45,.7);
        padding: 8px 10px;
        font-size: 18px;
        margin: 0 20px;
        line-height: 26px;
        span {
          background: transparent;
          padding: 0;
          display: inline;
        }
        br {
          display: none;
        }
      }
    }
  }

  section#brands article {
    h1 {
      font-size: 22px;
    }
    p {
      font-size: 14px;
    }
  }

  #header {
    border-top: 0 none;
    #nav {
      display: none;
    }
    h1#logo {
      margin: 0 auto;
      width: 253px;
      float: none;
      a {
        background: url(../img/logo-2x.png) no-repeat 0 0;
        height: 32px;
        width: 202px;
        background-size: 202px 64px;
        &:hover {
          strong {display: none;}
        }
      }
      strong {
        display: none;
      }
    }
  }

  section#key-features article {
    div {
      background: transparent !important;
      padding: 1.5em 0 2em;
    }
    div {
      padding-right: 20px;
      padding-left: 20px;
      text-align: left;
      span.icon {
        display: none !important;
      }
    }
  }
  section#key-features article.friendly-adoption div {
    text-align: left;
    padding-right: 20px;
    padding-left: 20px;
  }

  .application-main-content #sidebar-toggle {
    display: block;
  }

  #footer {
    text-align: center;
  }
  .project {
    .project-row {
      @include clearfix();
      .project-col-left {
        float: none;
        width: 100%;
      }
      .project-col-right {
        float: none;
        width: 100%;
        padding-top: 2em;
      }
    }
  }
}

@media (max-width: 600px) {
  section#welcome {
    height: 180px;
    background: url(../img/homepage-bg.png) center -100px no-repeat rgb(147, 173, 160);
    article {
      span.logo-reactor {
        display: none;
      }
      h1 {
        font-size: 16px;
        line-height: 25px;
        text-align: left;
        margin: 0 20px 10px 20px;
        strong {
          padding: 10px;
          display: block;
        }
      }
      p {
        display: block;
        text-align: left;
        background: rgba(52,48,45,.7);
        padding: 8px 10px;
        font-size: 14px;
        margin: 0 20px;
        line-height: 26px;
        span {
          background: transparent;
          padding: 0;
          display: inline;
        }
        br {
          display: none;
        }
      }
    }
  }

  .learn article {
    padding: 1em 1em 1em 2.5em;
    p.title {
      .fa {
        position: absolute;
        top: 5px;
        left: -38px;
        font-size: 30px;
      }
    }
  }

  section#brands article {
    float: none;
    width: auto;
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
    span.icon {
      margin-bottom: 15Px;
    }
  }

  section#key-features article {
    font-size: 14Px;
    h1 {
      font-size: 25px;
    }
  }

  #footer {
    .row {
      nav {
        float: none;
        width: auto;
        padding: 0 1em;
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid rgba(255,255,255,.1);
        &:last-child {
          margin-bottom: 0;
          border-bottom: 0;
          padding-bottom: 0;
        }
      }
    }
  }

  section#applications {
    article {
      div.title {
        float: none;
        width: 100%;
        text-align: center;
        H1 {
          padding-bottom:5px;
        }
        p {
          padding: 10px 0;
        }
      }

      div.github, div.npm, div.nuget, div.javadoc, div.reference {
        width: 100%;
        float: none;
        padding: 10px 0;
      }
    }
  }

}


/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  @include mobile-lg();
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  @include mobile-sm();
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  @include mobile-lg();
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  @include mobile-sm();
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  @include mobile-lg();
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  @include mobile-sm();
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}
